<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>昨日联系客户数据</title>
    <!-- elementUI css -->
    <link rel="stylesheet" href="/unpkg/lib-master/theme-chalk/index.css"> 
    <link rel="stylesheet" href="/css/public.css">
    <style type="text/css">
        html {
            min-width: 900px; 
        }
        
        body {
            background: #f0f2f5;
            margin: 0;
            padding: 0; 
        }
        
        .radardetail_dataDetail_content {
            padding: 19px 24px;
            margin: 16px;
            background: #fff;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05);
        }
        
        .radardetail_dataDetail_list {
            background: #fbfdff;
            border: 1px solid #daedff;
            display: flex;
            max-width: 750px;
        }
        
        .radardetail_dataDetail_list li {
            flex: 1;
            margin: 31px 0;
            border-right: 1px solid #e9e9e9;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .radardetail_dataDetail_list li:last-child {
            border-right: none;
        }
        
        .radardetail_dataDetail_list li b {
            font-size: 24px;
            font-weight: 500;
            color: #000;
            line-height: 33px;
            margin-bottom: 5px;
        }
        
        .radardetail_dataDetail_list li span {
            font-size: 13px;
            font-weight: 400;
            color: rgba(0, 0, 0, .65);
            line-height: 18px;
        }
        
        .customerData_title_container {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .customerData_title_container h2 {
            font-size: 17px;
            color: #333;
            font-weight: 700;
        }
        
        .customerData_publicLabel_container {
            font-size: 14px;
            color: #606266;
        }
        
        .trend_setting_content {
            display: flex;
            align-items: center;
        }
        
        .trend_settingDate_container {
            margin-left: 20px;
            display: flex;
            align-items: center;
        }
        
        .trend_settingSelectPeople_container {
            margin-left: 20px;
            display: flex;
            align-items: center;
        }
        
        .trend_setting_container {
            margin: 20px 0;
        }
        [v-cloak] {
            display: none; 
        } 
    </style>

</head>

<body>
    <div id="app">
        <!-- 头数据部分 -->
        <div class="radardetail_dataDetail_content" v-loading.fullscreen.lock="fullscreenLoading">
            <div class="customerData_title_container">
                <h2>员工详情({$user->name})30日信息</h2>
            </div>
            <ul class="radardetail_dataDetail_list" v-cloak>
                <li>
                    <b>!{!{yesterdayCustomer.chat_cnt}}</b>
                    <span>聊天总数(条)</span>
                </li>
                <li>
                    <b>!{!{yesterdayCustomer.message_cnt}}</b>
                    <span>发送消息数(条)</span>
                </li>
                <li>
                    <b>!{!{yesterdayCustomer.reply_percentage}}</b>
                    <span>已回复聊天平均占比(%)</span>
                </li>
                <li>
                    <b>!{!{yesterdayCustomer.avg_reply_time}}</b>
                    <span>平均首次回复时长(min)</span>
                </li>
            </ul>
        </div>
        <!-- 趋势图头部 -->
        <div class="radardetail_dataDetail_content">
            <div class="customerData_title_container">
                <h2>趋势图</h2>
            </div>
            <div class="trend_header_container" style="margin-bottom: 10px;">
                <div class="trend_settingSelectType_container">
                    <el-radio-group v-model="ChartType" size="medium" @change="ChartTypeClickFun">
                        <el-radio-button label="chat_cnt">聊天总数</el-radio-button>
                        <el-radio-button label="message_cnt">发送消息数</el-radio-button>
                        <el-radio-button label="reply_percentage">已回复聊天占比</el-radio-button>
                        <el-radio-button label="avg_reply_time">平均首次回复时长</el-radio-button>
                    </el-radio-group>
                </div>

                <div class="trend_setting_container">
                    <div class="trend_setting_content">
                        <div class="trend_settingSelectDate_container" style="width: 100px;">
                            <el-select v-model="timeType" size="small" @change="timeTypeFun">
                                <el-option label="昨日" value="days"></el-option>
                                <el-option label="近一周" value="one_week"></el-option>
                                <el-option label="近一个月" value="one_month"></el-option>
                            </el-select>
                        </div>
                        <div class="trend_settingDate_container">
                            <label class="customerData_publicLabel_container">自定义：</label>
                            <el-date-picker v-model="Date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small" style="width: 220px;" @change="DateTypeFun">
                            </el-date-picker>
                        </div>
                    </div>
                </div>
                <!-- 折线图 -->
                <div class="trend_charts_container">
                    <div id="main" style="width: 100%;height:400px;"></div>
                </div>

            </div>
            <div class="trend_settingSelectType_container" style="margin-bottom: 20px;">
                <el-radio-group v-model="TableType" size="medium" @change="TableTypeFun">
                    <el-radio-button label="times">按日期查看</el-radio-button>
                    <el-radio-button label="users">按员工查看</el-radio-button>
                </el-radio-group>
            </div>

            <el-table :data="dateTableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%" v-if="TableType == 'times'">
                <el-table-column prop="statistics_date" label="日期" width="180"></el-table-column>
                <el-table-column prop="chat_cnt" label="聊天总数" width="180"></el-table-column>
                <el-table-column prop="message_cnt" label="发送消息数"></el-table-column>
                <el-table-column prop="reply_percentage" label="已回复聊天占比"></el-table-column>
                <el-table-column prop="avg_reply_time" label="平均首次回复时长"></el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pagesize" :total="dateTableData.length" v-if="TableType == 'times'"></el-pagination>

            <el-table :data="userTableData" border style="width: 100%" v-if="TableType == 'users'">
                <el-table-column prop="id" label="id"></el-table-column>
                <el-table-column prop="avatar" label="头像">
                    <template width="90" slot-scope="userTableData" v-if="TableType == 'users'">
                        <img style="width:30px;height:30px;border:none;" :src="userTableData.row.avatar">
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="chat_cnt" label="聊天总数"></el-table-column>
                <el-table-column prop="message_cnt" label="发送消息数"></el-table-column>
                <el-table-column prop="reply_percentage" label="已回复聊天占比"></el-table-column>
                <el-table-column prop="avg_reply_time" label="平均首次回复时长"></el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pagesize" :total="pageTotal" v-if="TableType == 'users'&& pageTotal"></el-pagination>

        </div>
    </div>
    </div>
    </div>
    <script src="/unpkg/unpkg.vue.js"></script>
    <script src="/cdn/qs.min6.js"></script>
    <script src="/unpkg/lib-master/index.js"></script>
    <script src="/unpkg/unpkg.axios.min.js"></script>
    <script src="/cdn/echarts.min.js"></script>
    <script type="text/javascript">
        var myapp = new Vue({
            el: '#app',
            data() {
                return {
                    fullscreenLoading: false, //loading全屏动画参数
                    ChartType: 'chat_cnt', //趋势图切换类型
                    timeType: 'one_week', //时间类型
                    starDate: '',
                    endDate: '',
                    personnel: '{$user_id}', //选择员工的参数
                    Date: '', //自定义日期
                    TableType: 'users', //表格类型数据
                    userTableData: [], //员工表格参数
                    dateTableData: [], //日期表格参数
                    yesterdayCustomer: {}, //昨日数据
                    personnels: {}, //员工列表
                    currentPage: 1, //初始页
                    pagesize: 10, //    每页的数据
                    pageTotal:null,//按员工查看总条目数
                };
            },
            mounted() {
                this.openFullScreen1();
                // this.drawChartLine();
                this.statisoneFun();
                this.statisticsFun();
                // this.$nextTick(() => {
                //  this.drawChartLine();
                // });
            },
            methods: {
                // 趋势图切换类型
                ChartTypeClickFun: function(res) {
                    let t = this;
                    t.openFullScreen1();
                    console.log(t.ChartType);
                    t.statisticsFun();
                },
                // 昨日 近一周 近一月 切换
                timeTypeFun: function(res) {
                    let t = this;
                    t.openFullScreen1();
                    console.log(t.timeType);
                    t.starDate = "";
                    t.starDate = "";
                    t.Date = "";
                    t.statisticsFun();
                },
                // 自定义日期切换
                DateTypeFun: function(res) {
                    let t = this;
                    t.openFullScreen1();
                    if (res != null) {
                        console.log(t.switchDateFun(t.Date[0]));
                        console.log(t.switchDateFun(t.Date[1]));
                        t.timeType = '自定义';
                        t.starDate = t.switchDateFun(t.Date[0]);
                        t.endDate = t.switchDateFun(t.Date[1]);
                        t.statisticsFun();
                    }
                },
                // 选择员工
                selectPeopleFun: function(res) {
                    console.log(res);
                    let t = this;
                    t.openFullScreen1();
                    this.personnel = res;
                    console.log(this.personnel);
                    t.statisticsFun();
                },
                // 切换表格类型
                TableTypeFun: function(res) {
                    console.log(res);
                    let t = this;
                    t.openFullScreen1();
                    t.TableType = res;
                    t.currentPage = 1;
                    t.pagesize = 10;
                    t.statisticsFun();
                },
                // 初始化数据
                // 请求昨日联系客户数据
                statisoneFun: function() {
                    let t = this;
                    t.openFullScreen1();
                    let requestData = {
                        'user': t.personnel,
                        'wid': "{$wid}"
                    };
                    axios.post('/Addons/StoresCode/Admin/Data/statisone.html', Qs.stringify(requestData), {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                    }, ).then(function(res) {
                        console.log(res)
                        if(res.data.status == "success"){
                            t.personnels = res.data.data.user_list;
                            t.yesterdayCustomer = res.data.data.datass;
                        }else if(res.data.status == "error"){
                            t.$message({
                                message: res.data.msg,
                                type: 'error',
                                showClose: true,
                                center: true
                            });
                        }
                    }).catch(function(res) {
                        console.log(res);
                    }).finally(function(res) {
                        t.fullscreenLoading = false;
                    });
                },
                // 折线图数据
                statisticsFun: function(page) {
                    let t = this;
                    t.openFullScreen1();
                    let requestData = {
                        'type': t.starDate ? 'usedate' : t.timeType,
                        'user': t.personnel,
                        'startDate': t.starDate,
                        'endDate': t.endDate,
                        'datatype': t.ChartType,
                        'mold': t.TableType,
                        'wid': "{$wid}"
                    };
                    axios.post('/Addons/StoresCode/Admin/Data/statistics.html', Qs.stringify(requestData), {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                    }, ).then(function(res) {
                        console.log(requestData);
                        console.log(res)
                        if(res.data.status == "success"){
                            if (t.TableType == "times") {
                                t.dateTableData = res.data.data.timedata;
                            } else if (t.TableType == "users") {
                                t.userTableData = res.data.data.userdata;
                                t.pageTotal = res.data.data.count;
                            }
                            t.drawChartLine(res.data.data.resultsdata);
                            // t.yesterday = res.data.data;
                        }else if(res.data.status == "error"){
                            console.log(res.data.msg);
                            t.$message({
                                message: res.data.msg,
                                type: 'error',
                                showClose: true,
                                center: true
                            });
                        }
                    }).catch(function(res) {
                        console.log(res);
                    }).finally(function(res) {
                        t.fullscreenLoading = false;
                    });
                },
                // 折线图
                drawChartLine(ChartLine) {
                    // 基于准备好的dom，初始化echarts实例
                    let myChart = echarts.init(document.getElementById("main"));
                    let listener = function() {
                        myChart.resize()
                    }
                    window.addEventListener('resize', listener)
                        // 指定图表的配置项和数据
                    let option = {
                        title: {},
                        tooltip: {
                            trigger: 'axis'
                        },
                        color: ["#5b8ff9"],
                        legend: {
                            data: ['新增客户数', '成员发起好友申请数', '被客户删除拉黑数']
                        },
                        grid: {
                            top: '3%',
                            left: '2%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: ChartLine.statistics_date,
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            type: 'line',
                            stack: '总量',
                            data: ChartLine.results,
                            smooth: true,
                        }, ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                },
                openFullScreen1() {
                    this.fullscreenLoading = true;
                    setTimeout(() => {
                        this.fullscreenLoading = false;
                    }, 2000);
                },
                // 转换日期格式
                switchDateFun: function(date) {
                    var nowdate = new Date(date).toLocaleDateString().replace(/\//g, '-')
                    return nowdate
                },
                // 初始页currentPage、初始每页数据数pagesize和数据data
                handleSizeChange: function(size) {
                    this.pagesize = size;
                    console.log(this.pagesize) //每页下拉显示数据
                },
                handleCurrentChange: function(currentPage) {
                    this.currentPage = currentPage;
                    console.log(this.currentPage) //点击第几页
                    this.statisticsFun(this.currentPage);
                },
            },

        })
    </script>
</body>

</html>